<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Project - ${project.name}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main"/>
</head>
<body>
<div class="container">
    <div id="tabarea">
        <ul>
            <li class="first-tab" onclick="window.location = '${createLink(controller: 'dashboard', action: 'index')}'"><span class="left"></span><span class="content">Dashboard</span><span class="right"></span></li>
            <li class="current" style="z-index: 11" onclick="window.location = '${createLink(controller: 'workmates', action: 'index')}'"><span class="left"></span><span class="content">Projects & People</span><span class="right"></span></li>
            %{--<li style="z-index: 8" onclick="window.location='/link-me-in/opensource.gsp'"><span class="left"></span><span class="content">Opensource</span><span class="right"></span></li>--}%
            %{--<li style="z-index: 7" onclick="window.location = '/link-me-in/blog.gsp'"><span class="left"></span><span class="content">Blog</span><span class="right"></span></li>--}%
            %{--<li style="z-index: 6"><span class="left"></span><span class="content">Photos</span><span class="right"></span></li>--}%
            <div class="clear"></div>
        </ul>
    </div>
    <div class="title-area">
        <div class="title column span-10">Project: ${project.name}</div>
        <div class="column span-3 column nav-links" onclick="window.location = '${createLink(controller: 'workmates', action: 'index')}'">
            <img src="${createLinkTo(dir: 'images', file: 'project-list.png')}" alt="view project and members">
            View projects and members
        </div>
        <div class="clear"></div>
    </div>
    <div class="data-area" id="handler-container">
        <a href="${createLink(controller: 'projects', action: 'show', params: [name: prevProject.name])}"><img id="prev-one" src="${createLinkTo(dir: 'images', file: 'prev-person.png')}" alt="previous person"/></a>
        <a href="${createLink(controller: 'projects', action: 'show', params: [name: nextProject.name])}"><img id="next-one" src="${createLinkTo(dir: 'images', file: 'next-person.png')}" alt="previous person"/></a>
        <div class="separator first"></div>

        <div class="column span-10">
            <% if (creationTime != null) { %>
            <h1>This project was created at <%=creationTime%></h1>
            <% } %>
            &nbsp;
        </div>

        <div class="column last first sidebar">
            <div class="side-area area1">
                This project has
                <% for (String role: peopleByRoles.keySet()) { %>
                <h3><%=peopleByRoles[role].size() + " " + role%></h3>
                <ul>
                    <% for (person in peopleByRoles[role]) { %>
                    <li><a href="${createLink(controller: 'workmates', action: 'show', params: [name: person.shrinkedEnglishName])}">${person.englishName}</a> ${person.chineseName}</li>
                    <% } %>
                </ul>
                <% } %>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>

        <div class="separator"></div>
    </div>
</div>
</body>
</html>
